<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-tree style="max-width: 600px" :data="data" :default-expand-all="true" @node-click="handleNodeClick"/>
      </el-aside>
      <el-main>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <h2>部门信息</h2>
          <hr size="1" style="margin-bottom: 15px;">
          <el-form-item label="部门上级">
            <el-input v-model="form.parent" :disabled="true" />
          </el-form-item>
          <el-form-item label="部门名称">
            <el-input v-model="form.departmentName" clearable />
          </el-form-item>
          <el-form-item label="部门停用">
            <el-radio-group v-model="form.departmentStatus">
              <el-radio :value="1">启用</el-radio>
              <el-radio :value="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="部门类型">
            <el-select v-model="form.departmentTypeId" placeholder="请选择部门类别" clearable>
              <el-option v-for="item in TypeList" :key="item.departmentTypeId" :label="item.departmentTypeName" :value="item.departmentTypeId" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门区域">
            <el-cascader v-model="form.departmentAreaIds" :options="options" @change="handleChange" ref="departmentAreaArr" />
          </el-form-item>

          <h2>任职信息</h2>
          <hr size="1" style="margin-bottom: 15px;">
          <el-form-item label="直接上级">
            <el-input v-model="form.directSupervisor" clearable />
          </el-form-item>
          <el-form-item label="部门主管">
            <el-input v-model="form.departmentManager" clearable />
          </el-form-item>
          <el-form-item label="分管负责人">
            <el-input v-model="form.responsiblePerson" clearable />
          </el-form-item>
          <el-form-item label="财务主管">
            <el-input v-model="form.financeSupervisor" clearable />
          </el-form-item>
          <el-form-item label="可查看人员">
            <el-input v-model="form.viewableperson" clearable />
          </el-form-item>

          <h2>组织信息</h2>
          <hr size="1" style="margin-bottom: 15px;">
          <el-form-item label="职能体系">
            <el-input v-model="form.directSupervisor" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const route = useRoute();
const router = useRouter();

const form = reactive({
  departmentId: 0,
  pid: '',
  departmentName: "",
  departmentStatus: "",
  departmentTypeId: "",
  departmentAreaIds: "",
  departmentAreaNames: "",
  directSupervisor: "",
  departmentManager: "",
  responsiblePerson: "",
  financeSupervisor: "",
  viewableperson: "",
  functionalsystem: "",
  operator: localStorage.getItem("userName"),
  operationTime: null,

  parent:''
});

//保存按钮
const onSubmit = () => {
  console.log(form.pid)
  form.departmentAreaIds=form.departmentAreaIds.toString()
  axios.post(apiUrl+'/api/Department/AddDepartments',form)
  .then(res=>{
    if(res.data.code==0){
      ElMessage.success("保存成功");
      window.location.reload()
    }else{
      ElMessage.error("保存失败");
    }
  })
}

//获取部门类型
const TypeList:any=ref([])
const handleDepartmentType=()=>{
  axios.get(apiUrl+'/api/Department/GetDepartmentType')
  .then(res=>{
    TypeList.value=res.data.data
  })
}

//级联选择器
const departmentAreaArr:any=ref('')
const handleChange = (value:any) => {
  console.log(value)
  console.log(999,departmentAreaArr.value.getCheckedNodes()[0].pathLabels.toString())
  form.departmentAreaNames=departmentAreaArr.value.getCheckedNodes()[0].pathLabels.toString()
}

const options=ref([])
const handleDepartmentArea=()=>{
  axios.get(apiUrl+'/api/Department/GetDepartmentArea')
  .then(res=>{
    options.value=res.data.data
  })
}

//部门树形显示
const handleNodeClick = (tree: any) => {
  console.log(data)
  form.parent=tree.label
  form.pid=tree.value
}

const data: any=ref([])
const handleDepartmentTree=()=>{
  axios.get(apiUrl+'/api/Department/GetDepartment')
  .then(res=>{
    data.value=res.data.data
  })
}



//创建生命周期函数钩
onMounted(()=>{
  handleDepartmentType()
  handleDepartmentArea()
  handleDepartmentTree()
})
</script>
